import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addperson } from '../../redux/action/person.js'
import { nanoid } from 'nanoid'
class Person extends Component {
    addperson = () => {
        const { value } = this.name;
        this.props.addperson({ name: value, id: nanoid() });
        this.name.value = "";
    }
    render() {
        const { list } = this.props;
        return (
            <div className='container mt-3'>
				<div className="input-group mb-3">
				  <input type="text" ref={(name)=>this.name=name} className="form-control" placeholder="输入姓名" />
				  <div className="input-group-append">
				    <button onClick={this.addperson} className="btn btn-primary" type="button">添加</button>
				  </div>
				</div>
				<ul className="list-group">
				  {
				  	list.map((item)=>(
				  		<li className="list-group-item" key={item.id}>{item.name}</li>
				  	))
				  }
				</ul>
				<p className='text text-primary mt-3'>当前求和为{this.props.num}</p>
			</div>
        )
    }
}

const mapState = (state) => ({ list: state['person'], num: state['count'] })
const mapDispatch = { addperson }

export default connect(mapState, mapDispatch)(Person)